<template>
  <div>
    <el-form
        autocomplete="on"
        :model="loginForm"
        ref="loginForm"
        label-position="left"
    >
    <el-row :gutter="20">
      <el-col :span="20"><el-input placeholder="请输入搜索内容"
                                   name="search"
                                   type="text"
                                   v-model="loginForm.search"
                                   autocomplete="on"></el-input></el-col>
      <el-button
          icon="el-icon-search"
         circle
         @click.native.prevent="handleGetData"
      ></el-button>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="20">
        <el-input
            type="textarea"
            autosize
            placeholder="请输入标题"
            name="title"
            v-model="loginForm.title"
            autocomplete="on">
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button
            @click.native.prevent="handlePostNote"
        >创建帖子</el-button>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="20">
        <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入帖子内容"
            v-model="loginForm.content"
            autocomplete="on">
        </el-input>
      </el-col>
    </el-row>

    <el-row >
      <v-if tableData>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="pid"
          label="pid"
          width="100">
      </el-table-column>
      <el-table-column
          fixed
          prop="time"
          label="时间"
          width="150">
      </el-table-column>
      <el-table-column
          prop="username"
          label="作者"
          width="120">
      </el-table-column>
      <el-table-column
          prop="title"
          label="标题"
          width="120">
      </el-table-column>
      <el-table-column
          prop="content"
          label="内容"
          width="600">
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button @click="showDialog(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="handleDeleteData(scope.$index)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      </v-if>
    </el-row>
    </el-form>
    <el-dialog :modal="true"
               :fullscreen="fullscreen"
               custom-class="dialog-custom"
               :visible.sync="dialogVisible"
               width="50%">
      <el-form ref="form" :model="loginForm" label-width="80px">
        <el-form ref="form" :model="tableData" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="loginForm.tempData.title"
                    placeholder="请输入标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="loginForm.tempData.username"
                    placeholder="请输入作者名字"
          ></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" v-model="loginForm.tempData.content"
                    placeholder="请输入内容"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit($data.handlingRow)">立即修改</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </el-form-item>
      </el-form>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "simpleBlog",
  mounted() {
    this.handleGetHotData();
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    showDialog(row) {
      this.handlingRow = row;
      this.loginForm.tempData.title = row.title;
      this.loginForm.tempData.username = row.username;
      this.loginForm.tempData.content = row.content;
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    onSubmit(row) {
      row.title = this.loginForm.tempData.title;
      row.username = this.loginForm.tempData.username;
      row.content = this.loginForm.tempData.content;
      //submit data to back end

      this.$data.handlingRow = row;
      this.dialogVisible = false;
    },
    handleGetData(pid) {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store
              .dispatch("GetData", pid)
              .then(response => {
                this.loading = false;
                let code = response.data.status;
                if (code == "success") {
                  let saveData = {}
                  saveData.pid = response.data.pid;
                  saveData.time = response.data.time;
                  saveData.username = "host";
                  saveData.title = response.data.title;
                  saveData.content = response.data.content;
                  this.$data.tableData.push(saveData);
                } else {
                  this.$router.push({
                    path: "/error",
                    query: {message: response.data.message}
                  });
                }
              })
              .catch(() => {
                this.loading = false;
              });
        } else {
          // eslint-disable-next-line no-console
          console.log("参数验证不合法！");
          return false;
        }
      });
    },
    handlePostNote() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store
              .dispatch("PostNote", this.loginForm)
              .then(response => {
                this.loading = false;
                //let code = response.status;
                if (response.data.status === "success") {
                  let saveData = {}
                  saveData.pid = response.data.pid;
                  saveData.time = response.data.time;
                  saveData.username = this.loginForm.username;
                  saveData.title = this.loginForm.title;
                  saveData.content = this.loginForm.content;
                  this.$data.tableData.push(saveData);
                } else {
                  this.$router.push({
                    path: "/error",
                    query: {message: response.data.message}
                  });
                }
              })
              .catch(() => {
                this.loading = false;
              });
        } else {
          // eslint-disable-next-line no-console
          console.log("参数验证不合法！");
          return false;
        }
      });
    },
    handleDeleteData(index) {
      var pid = this.tableData[index].pid;
      this.loginForm.deletepid = pid;
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store
              .dispatch("DeleteData", this.loginForm)
              .then(response => {
                this.loading = false;
                let code = response.data.status;
                if (code == "success") {
                  this.tableData.splice(index, 1);
                  //this.$data.tableData.push(response.data.data)
                } else {
                  this.$router.push({
                    path: "/error",
                    query: {message: response.data.message}
                  });
                }
              })
              .catch(() => {
                this.loading = false;
              });
        } else {
          // eslint-disable-next-line no-console
          console.log("参数验证不合法！");
          return false;
        }
      });
    },
    handleGetHotData() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store
              .dispatch("GetHotData", this.loginForm)
              .then(response => {
                this.loading = false;
                //let code = response.status;
                if (response.data.status === "success") {
                  for (var i=0; i < response.data.pid_list.length; i++) {
                    this.handleGetData(response.data.pid_list[i]);
                  }
                } else {
                  this.$router.push({
                    path: "/error",
                    query: {message: response.data.message}
                  });
                }
              })
              .catch(() => {
                this.loading = false;
              });
        } else {
          // eslint-disable-next-line no-console
          console.log("参数验证不合法！");
          return false;
        }
      });
    },

  },

  data() {
    return {
      input: '',
      tableData: [],
      loginForm: {
        search:"",
        username: "admin",
        password: "123456",
        signature:"",
        title: "",
        content:"",
        pid:"",
        time:"",
        deletepid:"",
        tempData:{
          pid:"",
          title:"",
          username: "",
          content: "",

        },
      },
      dialogVisible:false,
      fullscreen:false,
      handlingRow:0,
    }
  }
}

</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
     margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>